<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">{{$t('back')}}</block>
			<block slot="content"><text class="text-black text-bold">{{i18n.title}}</text></block>
		</cu-custom>
		<view class="sign-title bg-white margin-top">
			<view v-if="attendanceDetail!=null" class="sign-title-l">
				<image  class="portrait" mode="aspectFill"
				 :src="$constant.IMG_VERSION == $constant.OSS?attendanceDetail.facewhitelist.personphoto:$constant.BASEURL+attendanceDetail.facewhitelist.personphoto" />
				<view class="text">
					<view  class="name">
						{{attendanceDetail.facewhitelist.personname}}
					</view>
					<view @click="goRule" class="gz">
						<text class="t1">{{i18n.group}}:{{attendanceDetail.facewhitelist.attshits.sname}}</text>
						<text>{{i18n.viewRules}}</text>
					</view>
				</view>
			</view>
			<view class="sign-title-r">
				<view class="date">
					<view @click="ChoiceTime" class="uni-input">{{date.title}}
						<text class="cuIcon-unfold" style="padding-left: 4upx;"></text>
					</view>
					<!-- 	<picker :end="endDate" mode="date" :value="date" @change="bindDateChange">
						<view class="uni-input">{{date}}
							<text class="cuIcon-unfold" style="padding-left: 4upx;"></text>
						</view>
					</picker> -->
				</view>
			</view>
		</view>
		<view v-if="!noData">
			<view v-if="attendanceDetail!=null" class="bg-white margin-top">
				<view @click="goLeaveDetail(item.id)" v-for="item in attendanceDetail.leavess" class="leave-item">
					<view class="leave-title">
						<text class="cuIcon-title text-orange "></text>
						{{item.vname}}
						<text class="cuIcon-right" style="padding-left: 8upx;"></text>
					</view>
					<view class="leave-content">
						{{DateFormat(item.leavestime.time,item.vminimum,item.lstime)}}
						~
						{{DateFormat(item.leaveetime.time,item.vminimum,item.letime)}}
						{{item.leavehour}}{{item.vminimum == 3?i18n.hour:i18n.day}}
					</view>
				</view>
			</view>
			<view class="bg-white">
				<uni-steps @subtitleClick="subTitleClick" :options="list2" active-color="#007AFF" :active="active" direction="column" />
			</view>
		</view>
		<select-date name="start" @complete="TimeComplete" timetype="day" :open="opendate" @change="SelectChange"></select-date>
		<no-more :show="noData" :text="i18n.noData"></no-more>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue';
	import selectDate from '@/components/selectdate/selectdate.vue'
	import {
		formateDate,
		getFormatTime,
		DateFormat
	} from "@/common/utils.js"

	let curDate = new Date() //获取当前日期
	function getNowDate() {
		let time = formateDate(curDate, 'Y-M-D')
		console.log('11111111111111',time)
		return time;
	}
	export default {
		computed: {
			i18n() {
				return this.$t('attendance')
			},
		},
		components: {
			uniSteps,
			selectDate
		},
		data() {
			return {
				attendanceDetail: null,
				active: -1,
				list2: [],
				date: {
					title: getNowDate(),
					timestamp: 0,
					time: ''
				},
				startDate: getNowDate(),
				endDate: getNowDate(),
				noData: false,
				opendate: false,
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			ChoiceTime() {
				this.opendate = true
			},
			SelectChange(e) {
				if (!e.show) {
					this.opendate = false
				}
				// console.log('SelectChange',e)
			},
			TimeComplete(e) {
				// console.log('TimeComplete',e)
				var selDate = new Date(Date.parse( e.date.title.replace(/-/g, "/")));
				// console.log('selDate',selDate)
				if (selDate > curDate) {
					uni.showToast({
						title: this.i18n.dateError,
						icon: 'none'
					})
				}
				//如果选择当前日期，不做操作
				else if (e.date.title != this.date.title) {
					this.date = e.date
					this.getData()
				}
			},
			// 产看规则
			goRule(facewhitelist) {
				uni.navigateTo({
					url: `../../myself/attendance-record/rule`
				})
			},
			goLeaveDetail(leaveid) {
				uni.navigateTo({
					url: `../leave/leavedetails?leaveid=${leaveid}`
				})
			},
			DateFormat(timestamp, vminimum, stime) {
				return DateFormat(timestamp, vminimum, stime)
			},
			// 选择打卡日期
			bindDateChange: function(e) {
				let time = e.target.value
				var selDate = new Date(Date.parse(time.replace(/-/g, "/")));
				if (selDate > curDate) {
					uni.showToast({
						title: this.i18n.dateError,
						icon: 'none'
					})
				}
				//如果选择当前日期，不做操作
				else if (time != this.date) {
					this.date = time
					this.getData()
				}
			},
			subTitleClick(e) {
				console.log(e.index + 1)
				console.log(this.attendanceDetail)
				let repairTime = ''
				switch (e.index) {
					case 0:
						repairTime = this.attendanceDetail.shifsset.stime
						break
					case 1:
						repairTime = this.attendanceDetail.shifsset.etime
						break
					case 2:
						repairTime = this.attendanceDetail.shifsset.stime2
						break
					case 3:
						repairTime = this.attendanceDetail.shifsset.etime2
						break
					case 4:
						repairTime = this.attendanceDetail.shifsset.stime3
						break
					case 5:
						repairTime = this.attendanceDetail.shifsset.etime3
						break
				}
				let repair = {
					ptype: e.index + 1,
					perid: this.attendanceDetail.facewhitelist.id,
					date: this.date.title,
					stime: repairTime,
					personname: this.attendanceDetail.facewhitelist.personname
				}
				uni.navigateTo({
					url: 'repair?repair=' + JSON.stringify(repair)
				})
			},
			getData() {
				this.$constant.checkUserInfo()
				this.list2 = []
				uni.showLoading({
					title: this.$t('loading')
				})
				// console.log('userid',getApp().globalData.userid)
				// console.log('url',this.$constant.BASEURL + this.$constant.GET_ATTENDANCE_RECORD)
				// console.log('da',this.date.title)
				uni.request({
				
					url: this.$constant.BASEURL + this.$constant.GET_ATTENDANCE_RECORD,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						perid: getApp().globalData.userid,
						page: 1,
						rows: 1,
						attdate_begin: this.date.title,
						attdate_end: this.date.title
					},
					success: (res) => {
						//console.log('22222222222222',JSON.stringify(res.data))
						if (res.data.code == 0) {
							
							if (typeof(res.data.data) == 'undefined') {
								// this.attendanceDetail = null
								this.noData = true
								return
							}
							this.noData = false
							let data = res.data.data.results.shift()
							console.log('3333', data)
							this.attendanceDetail = data

							let timeintervalcount = data.shifsset.timeintervalcount
							//获取打卡时间
							let timeinterval1 = data.timeinterval1
							// this.active = timeinterval1
							for (let i = 1; i <= timeintervalcount; i++) {
								if (i == 1) {
									let item0 = {
										title: `${data.stime == null ? this.i18n.noCardSwiping :this.i18n.timeCard+ getFormatTime(data.stime.time)}`,
										desc: this.i18n.onDutyTime + data.shifsset.stime
									}
									let item1 = {
										title: `${data.etime == null ? this.i18n.noCardSwiping :this.i18n.timeCard+ getFormatTime(data.etime.time)}`,
										desc: this.i18n.offDutyTime + data.shifsset.etime
									}

									if (this.date != getNowDate()) {
										if (item0.title == this.i18n.noCardSwiping) {
											item0.subtitle = this.i18n.applyCard
										}
										if (item1.title == this.i18n.noCardSwiping) {
											item1.subtitle = this.i18n.applyCard
										}
									}

									this.list2.push(item0)
									this.list2.push(item1)
									if (data.stime != null) {
										this.active = 0
									}
									if (data.etime != null) {
										this.active = 1
									}
								}

								if (i == 2) {
									let item2 = {
										title: `${data.stime2 == null ? this.i18n.noCardSwiping :this.i18n.timeCard+ getFormatTime(data.stime2.time)}`,
										desc: this.i18n.onDutyTime + data.shifsset.stime2
									}
									let item3 = {
										title: `${data.etime2 == null ? this.i18n.noCardSwiping :this.i18n.timeCard+ getFormatTime(data.etime2.time)}`,
										desc: this.i18n.offDutyTime + data.shifsset.etime2
									}
									this.list2.push(item2)
									this.list2.push(item3)
									if (this.date != getNowDate()) {
										if (item2.title == this.i18n.noCardSwiping) {
											item2.subtitle = this.i18n.applyCard
										}
										if (item3.title == this.i18n.noCardSwiping) {
											item3.subtitle = this.i18n.applyCard
										}
									}
									if (data.stime2 != null) {
										this.active = 2
									}
									if (data.etime2 != null) {
										this.active = 3
									}
								}

								if (i == 3) {
									let item4 = {
										title: `${data.stime3 == null ? this.i18n.noCardSwiping :this.i18n.timeCard+ getFormatTime(data.stime3.time)}`,
										desc: this.i18n.onDutyTime + data.shifsset.stime3
									}
									let item5 = {
										title: `${data.etime3 == null ? this.i18n.noCardSwiping :this.i18n.timeCard+ getFormatTime(data.etime3.time)}`,
										desc: this.i18n.offDutyTime + data.shifsset.etime3,
									}

									if (this.date != getNowDate()) {
										if (item4.title == this.i18n.noCardSwiping) {
											item4.subtitle = this.i18n.applyCard
										}
										if (item5.title == this.i18n.noCardSwiping) {
											item5.subtitle = this.i18n.applyCard
										}
									}

									this.list2.push(item4)
									this.list2.push(item5)
									if (data.stime3 != null) {
										this.active = 4
									}
									if (data.etime3 != null) {
										this.active = 5
									}
								}
							}
						} else {
							uni.showModal({
								content: res.data.message,
								showCancel: false,
								cancelText: this.$t('sure'),
								confirmText: this.$t('cancel')
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style>
	.leave-item {
		padding: 20upx 15upx;
	}

	.leave-item .leave-title {
		font-weight: bold;
		font-size: 30upx;
	}

	.leave-item .leave-content {
		padding: 4upx 30upx;
		font-size: 26upx;
	}

	.sign-title {
		display: flex;
		justify-content: space-between;
		padding: 30upx 24upx;
		border-bottom: 1upx solid #f1f1f1;
		/* align-items: center; */
	}

	.sign-title .portrait {
		width: 100upx;
		height: 100upx;
		line-height: 100upx;
		border-radius: 50%;
		background-color: #007AFF;
		color: #fff;
		font-size: 28upx;
		text-align: center;
	}

	.sign-title .sign-title-l {
		display: flex;
		/* align-items: center; */
	}

	.sign-title .sign-title-l .text {
		margin-left: 20upx;
	}

	.sign-title .sign-title-l .text .name {
		font-size: 32upx;
	}

	.sign-title .sign-title-l .text .gz {
		color: darkblue;
		display: inline-flex;
	}

	.sign-title .sign-title-l .text .gz text {
		display: inline-block;
	}

	.sign-title .sign-title-l .text .gz .t1 {
		overflow: hidden;
		/*超出部分隐藏*/
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		white-space: nowrap;
		/*规定段落中的文本不进行换行 */
		width: 150upx;
		/*需要配合宽度来使用*/
	}
</style>
